<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将上传得图片转换成base64格式并进行h2canvas截图</title>
    <style>
        #box img {
            width:200px;
        }
    </style>
</head>

<body>
    <input type="file" id="filePic" onchange="imgtobase64()">
    <input type="file" id="filePic1" onchange="imgtobase65()">
    <button onclick="cli()">截图</button>
    <div id="box" style="position: relative;">
        <!-- <img src="" alt="" id="base65Img" style="position: absolute;left: 0;top: 0;width: 50px;"> -->
        <img src="" alt="" width="100%" id="base64Img">
    </div>
    <script src="./js/jq.min.js"></script>
    <script src="./js/H2canvas.js"></script>
    <script>
        function cli() {
            console.log($("#base64Img").height());
            $("#box").css({
                width:$("#base64Img").width(),
                height:$("#base64Img").height(),
            })
            html2canvas(document.getElementById("box")).then(function (canvas) {
            
                var strDataURI = canvas.toDataURL();
                console.log(strDataURI);
                document.body.appendChild(canvas);
            });
        }

        function imgtobase64() {
            var files = document.getElementById("filePic").files[0];
            console.log(files);
            var reader = new FileReader();
            if (files) {
                reader.readAsDataURL(files);
            }
            reader.onloadend = function () {
                console.log(reader);
                $("#base64Img").attr("style", "display:inline-block");
                $("#base64Img").attr("src", reader.result);
                // $("#box").css({
                //     width: $("#base64Img").width(),
                //     height: $("#base64Img").height()
                // })
                // setTimeout(function () {
                //     html2canvas(document.getElementById("box")).then(function (canvas) {
                //         $(canvas).css({
                //             width:"200px",
                //             height:"100px"
                //         })
                //         var strDataURI = canvas.toDataURL();
                //         console.log(strDataURI);
                //         document.body.appendChild(canvas);
                //     });
                // }, 500)
            }
        }

        function imgtobase65() {
            var files = document.getElementById("filePic1").files[0];
            console.log(files);
            var reader = new FileReader();
            if (files) {
                reader.readAsDataURL(files);
            }
            reader.onloadend = function () {
                console.log(reader);
                $("#base65Img").attr("style", "display:inline-block");
                console.log(reader.result);
                $("#base65Img").attr("src", reader.result);
                console.log(reader.result);
                // setTimeout(function () {
                //     html2canvas(document.getElementById("box")).then(function (canvas) {
                //         $(canvas).css({
                //             width:"200px",
                //             height:"100px"
                //         })
                //         var strDataURI = canvas.toDataURL();
                //         console.log(strDataURI);
                //         document.body.appendChild(canvas);
                //     });
                // }, 500)
            }
        }
    </script>
</body>

</html>